<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{ title }}</text>
        </view>

        <view>{{ number + 1 }}</view>
        <view>{{ ok? 'YES' : 'NO'  }}</view>
        <view>{{ message.split('').reverse().join('') }}</view>
<!--split分割reverse倒装join拼接>
        <!-- index 下标动则会... -->
        <view v-for="item in arr" style="color:#FF0000">
            {{ item }}
        </view>

        <view v-for="(item, index) in 5" style="color: #00FF00">
            <view :class="'list-' + index%2">{{ index + 1 }}</view>
        </view>

        <view v-for="(value, name, index) in object">
            {{ index }}---{{ name }}---{{ value }}
        </view>

        <view v-for="item in arr" :key="item.id">
            <view style="color:#333300">{{ item.id }}:{{ item.name }}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello uni',
                number: 1,
                message: 'Hello',
                arr: [{
                        id: 1,
                        name: 'uni-app'
                    },
                    {
                        id: 2,
                        name: 'HTML'
                    },
                    {
                        id: 3,
                        name: 'WeChat'
                    },
                    {
                        id: 4,
                        name: 'Android'
                    }
                ],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2020-04-10'
                }
            }
        }
    }
</script>

<style>
	 .content {
	 	display: flex;
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	 }
	 
	 .logo {
	 	height: 200rpx;
	 	width: 200rpx;
	 	margin-top: 200rpx;
	 	margin-left: auto;
	 	margin-right: auto;
	 	margin-bottom: 50rpx;
	 }
	 
	 .text-area {
	 	display: flex;
	 	justify-content: center;
	 }
	 
	 .title {
	 	font-size: 36rpx;
	 	color: #8f8f94;
	 }
</style>